<template>
	<view class="app-area">
		<UniNavBar :statusBar="true" leftIcon="back" :title="i18n.state" @clickLeft="back"></UniNavBar>
		<view v-for="part in areas" :key="part.title" class="lists">
			<h3 class="subtitle">{{part.title}}</h3>
			<view class="subline" v-for="item in part.data" :key="item.code" @tap="selectedArea(item)">
				<view class="text">{{cur_lang == 'chs' ? item.zh : item.en}} <text class="codenum">{{item.code}}</text></view>
				<text class="iconfont icon-arrow-right"></text>
			</view>
		</view>
	</view>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
import {showToast, pageback} from '@/common/js/util.js'
import UniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	data() {
		return {
			areas: [],
			cur_lang: "chs"
		}
	},
	computed: {
		i18n () {  
			return this.$t('message')
		},
		...mapGetters([
			'getRequestUrl',
			'getLang'
		])
	},
	onShow() {
		this.cur_lang = uni.getStorageSync('lang') == 2 ? 'en' : 'chs';
	},
	onLoad() {
		this._getData();
	},
	methods: {
		_getData() {
			uni.request({
				url: this.getRequestUrl + "/api/Countries/Countries_2",
				success: (res) => {
					if (res.data.code == 1) {
						this.areas = res.data.data
					} else {
						showToast(res.data.msg);
					}
				},
				fail: () => {
					showToast(this.i18n.request_fail);
				}
			})
		},
		back() {
			pageback()
		},
		selectedArea(e) {
			console.log(e)
			this.setIncode(e);
			setTimeout(()=> {
				pageback()
			}, 500)
		},
		...mapMutations([
			'setIncode'
		])
	},
	components: {
		UniNavBar
	}
}
</script>

<style lang="scss">
@import "@/common/scss/variable.scss";
@import "@/common/scss/global.scss";
.app-area {
	color: $black;
	.lists {
		h3 {
			font-size: 16px;
			padding: 0 30upx;
			height: 30px;
			line-height: 30px;
			background-color: $page-bg-color2;
		}
		.subline {
			padding: 0 45upx;
			display: flex;
			flex-direction: row;
			height: 40px;
			justify-content: space-between;
			border-bottom: 1upx solid $split-line-color2;
			.iconfont {
				font-size: 14px;
				padding: 0 10px;
				margin: 0 -10px;
				line-height: 40px;
			}
			.text {
				line-height: 40px;
				font-size: 14px;
			}
			.codenum {
				margin-left: 10upx;
			}
		}
	}
}
</style>
